<template>
  <div class="login_container">
    <el-row>
      <!-- 当屏幕宽度小于等于768时，左边占0份，右边占24份 -->
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <!-- :model相当于v-bind:model的缩写 -->
        <el-form
          class="login_form"
          :model="signupForm"
          :rules="rules"
          ref="signupForms"
          v-if="step == 0"
        >
          <h1>Hello</h1>
          <h2>掌静脉预约挂号平台</h2>
          <el-form-item prop="username">
            <el-input
              :prefix-icon="User"
              v-model="signupForm.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="id_card">
            <el-input
              type="password"
              :prefix-icon="User"
              v-model="signupForm.id_card"
              show-password
              placeholder="请输入身份证号码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              :prefix-icon="Lock"
              v-model="signupForm.password"
              show-password
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="re_password">
            <el-input
              type="password"
              :prefix-icon="Lock"
              v-model="signupForm.re_password"
              show-password
              placeholder="请确认密码"
            ></el-input>
          </el-form-item>    
          <el-form-item prop="image_url">
           <el-button
              :loading="loading"
              class="login_btn"
              type="primary"
              size="default"
              @click="signupID"
            >身份认证注册</el-button>
          </el-form-item>  
          <el-form-item>
            <el-button
              :loading="loading"
              class="login_btn"
              type="primary"
              size="default"
              @click="signup"
            >
              注册
            </el-button>
            <el-button
              :loading="loading"
              class="login_btn"
              type="primary"
              size="default"
              @click="step = 1"
              style="margin-top: 10px; width: 100%"
            >
              去登陆
            </el-button>
          </el-form-item>
        </el-form>
        <el-form
          class="login_form"
          :model="loginForm"
          :rules="rules"
          ref="loginForms"
          v-else-if="step==1"
        >
          <h1>Hello</h1>
          <h2>掌静脉预约挂号平台</h2>
          <el-form-item prop="username">
            <el-input
              :prefix-icon="User"
              v-model="loginForm.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="id_card">
            <el-input
              type="text"
              :prefix-icon="User"
              v-model="loginForm.id_card"
   
              placeholder="请输入身份证号码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              :prefix-icon="Lock"
              v-model="loginForm.password"
              show-password
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="image_url">
           <el-button
              :loading="loading"
              class="login_btn"
              type="primary"
              size="default"
              @click="loginID"
            >身份认证登录</el-button>
          </el-form-item>  
          <el-form-item>
            <el-button
              :loading="loading"
              class="login_btn"
              type="primary"
              size="default"
              @click="loginID"
            >
              登录
            </el-button>
            <el-button
              :loading="loading"
              class="login_btn"
              type="primary"
              size="default"
              @click="step = 0"
              style="margin-top: 10px; width: 100%"
            >
              去注册
            </el-button>
          </el-form-item>
        </el-form>  
        <el-form v-else class="identifity">
        <!-- <IdName></IdName> -->
       <Camera @sendID="sendreturnID" @sendBase="sendreturnBase"></Camera>
        </el-form>
      </el-col>
    </el-row>
  
  </div>
  
</template>

<script setup lang="ts">

//引入插件图标
import { User, Lock ,Search } from "@element-plus/icons-vue";
//引入vue实例对象
import { reactive, ref, onMounted } from "vue";
//引入Vue实例路由
import { useRouter, useRoute } from "vue-router";
//引入elements-plus插件
import { ElNotification } from "element-plus";
//引入用户仓库
import useUserStore from "../../store/modules/user.js";
const userStore = useUserStore()
//引入身份验证界面
// import IdName from '../login/identifity/iden.vue'
import Camera from '../login/identifity/iden.vue';
// import { reqSignup } from "@/api/index.js";
// let a = async (data) => {
//   let b = await reqSignup(data);
//   console.log(b);
// };
// onMounted(() => {
//   a({
//     username: "admiasafdfaaaaaa",
//     password: "111111",
//     re_password: "111111",
//   });
// });
let step = ref(0);
let signupForms = ref();
let loginForms = ref();
//获取路由器
let $router = useRouter();
// 获取路由对象
let $route = useRoute();
//定义变量控制按钮加载效果
let loading = ref();
//收集注册数据
let signupForm = reactive({
  username: "",
  password: "",
  re_password: "",
   id_card:"",
  image_url:""
  
});
//收集账号与密码数据
let loginForm = reactive({ username: "", password: "" ,id_card:"",image_url:""});
//注册按钮的回调
const signup = async () => {
  //保证全部表单项校验通过
  await signupForms.value.validate();
  //按钮加载效果
  loading.value = true;
  //点击登录按钮以后干什么
  //通知仓库发起请求
  //请求成功->路由跳转
  //请求失败->弹出登陆失败信息
  try {
    //也可以书写.then语法
    await userStore.userSignup(signupForm);
    //注册成功的提示信息
    ElNotification({
      type: "success",
      message: "注册成功！",
    });
    //登录成功,加载效果也消失
    loading.value = false;
    step.value = 1;
  } catch (error) {
    //注册失败加载效果消失
    loading.value = false;
    //注册失败的提示信息
    ElNotification({
      type: "error",
      message: (error as Error).message,
    });
  }
};
//登录按钮的回调
const login = async () => {
  //保证全部表单项校验通过
  await loginForms.value.validate();
  //按钮加载效果
  loading.value = true;
  //点击登录按钮以后干什么
  //通知仓库发起请求
  //请求成功->路由跳转
  //请求失败->弹出登陆失败信息
  try {
    //也可以书写.then语法
    await userStore.userLogin(loginForm);
    //编程式导航跳转到展示数据的首页
    // !!!
    let redirect: any = $route.query.path;
    $router.push({ path: redirect || "/home" });
    //登录成功的提示信息
    ElNotification({
      type: "success",
      message: "登录成功！",
    });
    //登录成功,加载效果也消失
    loading.value = false;
  } catch (error) {
    //登陆失败加载效果消失
    loading.value = false;
    //登录失败的提示信息
    ElNotification({
      type: "error",
      message: (error as Error).message,
    });
  }
};
//身份认证注册
const signupID = async () => {
  step.value=2
}
//身份认证登录
const loginID=async () => {
  step.value=2
}
//摄像头返回数据
const sendreturnID=(imgreturn)=>{
  loginForm.id_card = imgreturn;
  step.value=1
}
const sendreturnBase=(imgreturn)=>{
console.log( imgreturn);

 
}
//自定义校验规则函数
//校验账号格式
const validatorUserName = (rule: any, value: any, callback: any) => {
  // console.log(rule)
  //rule：校验规则对象
  //value:表单元素文本内容
  //callback:符合条件，callback放行通过，不符合：注入错误提示信息
  if (value.length >= 5) {
    callback();
  } else {
    callback(new Error("账号长度至少5位"));
  }
};
//校验密码及确认格式
const validatorPassword = (rule: any, value: any, callback: any) => {
  //登录后才触发
  // console.log(rule)
  if (value.length >= 6) {
    callback();
  } else {
    callback(new Error("密码长度至少6位"));
  }
};
//校验身份证号长度
const validatorId_card  = (rule: any, value: any, callback: any) => {
  //登录后才触发
  // console.log(rule)
  if (value.length === 18) {
    callback();
  } else {
    callback(new Error("身份证号码长度不符"));
  }
};
// 校验身份证号长度
const validatorImage_url  = (rule: any, value: any, callback: any) => {
  //登录后才触发
  // console.log(rule)
  if (value.length === 18) {
    callback();
  } else {
    callback(new Error("身份证号码长度必须18位"));
  }
};

//定义表单校验需要的配置对象
const rules = {
  username: [
    //规则对象属性:
    // {
    //     required: true, // required,代表这个字段务必要校验的
    //     min: 5, //min:文本长度至少多少位
    //     max: 10, // max:文本长度最多多少位
    //     message: '长度应为6-10位', // message:错误的提示信息
    //     trigger: 'change', //trigger:触发校验表单的时机 change->文本发生变化触发校验, blur:失去焦点的时候触发校验规则
    // },
    { trigger: "change", validator: validatorUserName },
  ],
  id_card: [  // {
    //     required: true,
    //     min: 6,
    //     max: 10,
    //     message: '长度应为6-15位',
    //     trigger: 'change',
    // },
    { trigger: "change", validator: validatorId_card },
  ],
  password: [
    // {
    //     required: true,
    //     min: 6,
    //     max: 10,
    //     message: '长度应为6-15位',
    //     trigger: 'change',
    // },
    { trigger: "change", validator: validatorPassword },
  ],
  re_password: [
    // {
    //     required: true,
    //     min: 6,
    //     max: 10,
    //     message: '长度应为6-15位',
    //     trigger: 'change',
    // },
    { trigger: "change", validator: validatorPassword },
  ],
  image_url: [
    // {
    //     required: true,
    //     min: 6,
    //     max: 10,
    //     message: '长度应为6-15位',
    //     trigger: 'change',
    // },
    { trigger: "change", validator: validatorImage_url },
  ]
};
</script>

<style lang="scss" scoped>
.login_container {
  width: 100%;
  height: 100vh; //视口高度
  background: url("@/assets/images/background.jpg") no-repeat;
  background-size: cover; //背景图大小覆盖盒子

  .login_form {
    position: relative;
    width: 80%;
    top: 30vh;
    background: url("@/assets/images/login_form.png") no-repeat;
    background-size: cover;
    padding: 40px;

    h1 {
      color: white;
      font-size: 40px;
    }

    h2 {
      color: white;
      font-size: 20px;
      margin: 20px 0px;
    }

    .login_btn {
      width: 100%;
    }
  }
  .identifity{
    position: relative;
    top: 10%;
    right: 10%;
    left: 10%;
    width: 80%;
    height: 85vh;
   
  }
}
</style>
